프로젝트 최적화 사전 개념 | 최적화를 위한 폰트 설명

웹 폰트 포맷

• svg 방식으로 폰트를 사용할 수 있지만 거의 사용하지 않음

• TTF/OTF 파일은 거의 압축이 되지 않은 PC에서 폰트를 사용하기 위해서 사용한 포맷
웹 환경으로 넘어오면서, 웹에서도 폰트를 사용 필요성이 생김

• 웹에서 TTF/OTF 같은 폰트 포맷을 그대로 사용하기에는 큰 부담이라 TTF/OTF 를 압축해서 사용
⇒ 웹에서도 사용하기 쉽게 TTF/OTF 을 최대한 압축해서 브라우저에서 사용할 수 있게 함.
⇒ 이런 방식 WOFF 방식이고 WOFF 를 더 압축한게 WOFF2

• EOT 파일 포맷은 구 IE 에서 지원했던 폰트 포맷! (거의 사용 X)

폰트 적용 방식

1. FOUT
• 폰트를 다운로드 되기 전에는 기본 폰트로 텍스트를 보여줌
• text → font download → 적용된 font 로 적용

2. FOIT
• 폰트가 다운로드 되기 전에는 아예 안 보여주고 폰트가 다운로드 되면 텍스트 보여줌
• 컨텐츠(텍스트) 노출 X → 폰트 다운로드 → 폰트가 적용된 텍스트 보여줌

• font-display css 속성을 이용하여 해당 font 에 어떤 방식(FOIT, FOUT) 으로 적용할지 지정 가능

• auto
• 기본 값으로, 브라우저 기본 동작 IE,EDGE 는 FOUT, safari, chrome 은 FOIT

• block



• FOIT 방식 사용 (timeout = 3s)
• FOIT 을 방식을 적용해도 인터넷 상태가 안좋아서 긴 시간동안(3s) 폰트가 다운이 안되서 컨텐츠(텍스트)가 노출이 안되는 경우 발생
그래서 적어도 3s 동안 기다렸다가 적용이 안되면 그냥 기본 폰트로 적용시키는 방법
• 폰트가 4s 에 다운로드가 되면
0 ~ 3s 컨텐츠 보여주지 않고
3s 에 기본 폰트로 컨텐츠 보여주고
4s 에 적용된 폰트를 보여주는 방식

• swap



• FOUT 방식을 사용
• 폰트가 4s 에 다운로드 되면
0 ~ 4s 기본폰트라 적용된 컨텐츠 제공
4s ~ 적용된 폰트를 보여주는 방식

• fallback



• 기본적으로 FOIT (timeout - 0.1s) 방식으로 제공 0.1s 인 FOIT 방식을 제공함
• 폰트가 4s 에 다운로드가 되면
0 ~ 0.1s 컨텐츠 제공하지 않음(FOIT)
0.1s ~
3s 이후에도 폰트를 적용하지 못하면 기본 폰트를 서비스 제공
3s 이후에 깜빡임을 제공하지 않기 위해
이미 다운로드 된 컨텐츠는 해당 폰트를 캐시

• optional
• fallback 과 방식(FOIT (timeout - 0.1s) 방식)
• fallback 은 폰트가 다운로드 되는 시간(3s) 을 가지고 기본 폰트 유지할지 웹 폰트 적용 여부 결정
optional 은 시간과 상관없이 네트워크 상태에 따라 기본 폰트로 유지할지 웹 폰트 적용 여부 결정, 이후 캐시
네트워크 상태는 브라우저에서 처리?

• 구글은 optional 방식으로 설정하는 것을 권장
서비스에 맞게 처리하면 됨 (FOIT 방식인 block 으로 처리?)
⇒ 텍스트 컨텐츠 자체가 중요한 요소 이기 보다는 차라리 보여줄 거면 font 가 적용된 것을 보여주는 게 낫다고 판단해서 FOIT 방식인 block 으로 처리